<template>
	<div>
		<view class="page__bd">
			<view class="weui-tab">
				<view class="weui-navbar fixed">
					<block v-for="(item,index) in tabs" class='navr'>
						<view :id="index" class="weui-navbar__item " :class="activeIndex == index ? 'weui-bar__item_on' : ''" @click="tabClick">
							<view class="weui-navbar__title">{{item}}</view>
						</view>
					</block>
					<view class="weui-navbar__slider" :style="'left: '+sliderLeft+'px; transform: translateX('+sliderOffset+'px);'"></view>
				</view>
				
				<view class="weui-tab__panel">
					<view class="weui-tab__content" v-if="activeIndex == 0">
						
						<scroll-view scroll-y="true" @scrolltolower="scrollLoading" class='scrollarea'>
						<view class="weui-panel__bd">
					
							
							<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" v-for='item in joining'>
								<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
									<image class="weui-media-box__thumb" :src="'https://tp5.blver.cn'+item.goods_image" />
								</view>
								<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
									<view class="weui-media-box__title">{{item.goods_title}}</view>
									<view class="weui-media-box__desc">{{item.goods_cailiao}}</view>
									<view class="price">价格<span>￥{{item.selling_price}}</span></view>
								</view>
								<i class="iconfont" @click="removejoin(item)">&#xe65d;</i>
							</navigator>

						</view>
						
						</scroll-view>
						
					</view>
					<view class="weui-tab__content" v-if="activeIndex == 1">
						
						<scroll-view scroll-y="true" @scrolltolower="scrollLoading2" class='scrollarea'>
						<view class="weui-panel__bd">
							<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" v-for='item in nojoin'>
								<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
									<image class="weui-media-box__thumb" :src="'https://tp5.blver.cn'+item.goods_image" />
								</view>
								<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
									<view class="weui-media-box__title">{{item.goods_title}}</view>
									<view class="weui-media-box__desc">{{item.goods_cailiao}}</view>
									<view class="price">价格<span>￥{{item.selling_price}}</span></view>
								</view>
								<i class="iconfont" @click="addjoin(item)">&#xe673;</i>
							</navigator>

						</view>
						</scroll-view>
					</view>

				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import { requests } from "../../../static/js/network"
	const sliderWidth = 96
	export default {
		data() {
			return {
				tabs: ["已加入花店", "未加入花店"],
				activeIndex: 1,
				sliderOffset: 0,
				sliderLeft: 0,
				nojoin:[],
				joining:[],
				page: 1,
				noscroll: true
			}
		},
		onLoad() {
			var that = this;
			wx.getSystemInfo({
				success: function(res) {
					that.sliderLeft = (res.windowWidth / that.tabs.length - sliderWidth) / 2;
					that.sliderOffset = res.windowWidth / that.tabs.length * that.activeIndex

				}
			});
		},
		mounted() {
			this.init()
			
		},
		methods: {
			removejoin(obj){
				let self = this
				requests({
					url: 'https://tp5.blver.cn/api/wechat/changeFxGoods',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						id:obj.id,
						type:2,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						wx.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
								self.init()
					}
				})
			},
			addjoin(obj){
				let self = this
				requests({
					url: 'https://tp5.blver.cn/api/wechat/changeFxGoods',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						id:obj.id,
						type:1,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						wx.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							self.init()
					}
				})
			},
			tabClick(e) {
				
				this.sliderOffset = e.currentTarget.offsetLeft,
				this.activeIndex = e.currentTarget.id
				this.init() 
			},
			init() {
				let self = this
				this.noscroll=true
				this.page=1
				requests({
					url: 'https://tp5.blver.cn/api/wechat/notFxGoodsList',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						page: 1,
						each: 7,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						self.nojoin=res.data.data
					}
				})
				requests({
					url: 'https://tp5.blver.cn/api/wechat/isFxGoodsList',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						page: 1,
						each: 7,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					success: function(res) {
						console.log(res)
						self.joining=res.data.data
						//self.content=self.classlist[0].goods_content.replace(/"\/static/g, '"https://tp5.blver.cn/static').replace(/"\/static/g, '"https://tp5.blver.cn/static').replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
					}
				})
			},
			scrollLoading() {
				if(this.noscroll == false) {
					return
				}
				var self = this;
				// 显示加载图标  
				wx.showLoading({
					title: '玩命加载中',
				})
				// 页数+1  
				this.page = this.page + 1

				requests({
					url: `https://tp5.blver.cn/api/wechat/isFxGoodsList`,
					method: "POST",
					data: {
						page: self.page,
						each: 7,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					header: {
						'content-type': 'application/json' // 默认值
					},
					success: function(res2) {
						if(res2.data.data.length <= 0) {
							wx.showToast({
								duration: 2000,
								icon: 'none',
								title: '没有更多了',
							})

							self.noscroll = false
							return
						}
						let newarr = self.joining.concat(res2.data.data)
						self.joining = newarr
					}
				})

			},
			scrollLoading2() {
				if(this.noscroll == false) {
					return
				}
				var self = this;
				// 显示加载图标  
				wx.showLoading({
					title: '玩命加载中',
				})
				// 页数+1  
				this.page = this.page + 1

				requests({
					url: `https://tp5.blver.cn/api/wechat/notFxGoodsList`,
					method: "POST",
					data: {
						page: self.page,
						each: 7,
						session3rd: wx.getStorageSync('userinfo').session3rd
					},
					header: {
						'content-type': 'application/json' // 默认值
					},
					success: function(res2) {
						if(res2.data.data.length <= 0) {
							wx.showToast({
								duration: 2000,
								icon: 'none',
								title: '没有更多了',
							})

							self.noscroll = false
							return
						}
						let newarr = self.nojoin.concat(res2.data.data)
						self.nojoin = newarr
					}
				})

			},
		}
	}
</script>

<style>
	.scrollarea {
		height: 100vh;
	}
.price{font-size: 28rpx; color: #FF5151;}
.fixed{position: fixed; width: 100%; top: 0; background: #fff;}
.fixed .navr{ background: #fff; }
.weui-navbar__title{color:#FF5151 }
.weui-navbar__slider{background:#FF5151 ;}
.iconfont{color: #ED5564;}
</style>